<!DOCTYPE html>
<html>
<head>
{block name="header"}{include file="./admin/common/header" /}{/block}
</head>
<body>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
{block name="top-header"}{include file="./admin/common/top-header" /}{/block}
{block name="left"}{include file="./admin/common/left" /}{/block}
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
	{block name="main"}
	<div class="layui-tab" lay-filter="tab" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="10">系统信息</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
	<table class="layui-table" lay-even lay-skin="nob">
	  <tbody>
		{volist name="info" id="v"}
		<tr> 
		<td class="text">{$key}</td>
		<td class="input">{$v}</td>
		</tr>
		{/volist}
	  </tbody>
	</table>
	</div>
  </div>
</div>{/block}</div>
  </div>
{block name="footer"}{include file="./admin/common/footer" /}{/block}



</div>

<script>
//JavaScript代码区域
//JavaScript代码区域
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    tabAdd: function(url,id,name){
      //新增一个Tab项
      element.tabAdd('tab', {
        title: name//用于演示
        ,content:  '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:600px;"></iframe>'
        ,id: id//实际使用一般是规定好的id，这里以时间戳模拟下
      })
      //绑定右键
      //切换到指定Tab项
      element.tabChange('tab', id); //切换到：用户管理
    }
    ,tabDelete: function(othis){
      othis.addClass('layui-btn-disabled');
    }
    
  };
  
 $('.site-demo-active').on('click', function() {
                var dataid = $(this);

                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在
					
                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                            element.tabChange('tab', dataid.attr("data-id")); 
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
                    }
                }
            });
  
	var layid = location.hash.replace(/^#tab=/, '');
		element.tabChange('tab', layid);
  
	element.on('tab(tab)', function(elem){
    location.hash = 'tab='+ $(this).attr('lay-id');
  });
  
});	
</script>
</body>
</html>